<% layout("/common/layout.html"){ %>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">发表评价</h1>
	</header>
	<footer>
		<div class=" mui-row">
			<div class="footer-item mui-col-xs-4 ">
			</div>
			<div class="footer-item mui-col-xs-4 mui-text-right">
				<a href="comment.html"><button type="button" class="mui-btn mui-btn-outlined " style="padding: 6px 40px 4px 40px !important;">取消</button></a>
			</div>
			<div class="footer-item mui-col-xs-4 ">
				<a href="comment.html"><button type="button" class="mui-btn mui-btn-warning" style="padding: 6px 40px 4px 40px !important;">保存</button></a>
			</div>
		</div>
	</footer>
	<div class="mui-content" style="margin: 0px auto 60px auto;">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<div class="mui-media-body">
					<textarea rows="8" placeholder="亲 , 我们在努力做的更好喔..." style="border: 0px solid rgba(0, 0, 0, 0);"></textarea>
				</div>
			</li>
		</ul>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<div class="mui-row">
					<div class="mui-col-xs-4">
						<p>描述相符</p>
					</div>
					<div class="mui-col-xs-8" id="describe">
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell">
				<div class="mui-row">
					<div class="mui-col-xs-4">
						<p>发货速度</p>
					</div>
					<div class="mui-col-xs-8" id="goods">
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell">
				<div class="mui-row">
					<div class="mui-col-xs-4">
						<p>服务态度</p>
					</div>
					<div class="mui-col-xs-8" id="service">
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
						<span class="mui-icon mui-icon-star"></span>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#">拍照</a>
			</li>
		</ul>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#">相册</a>
			</li>
		</ul>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#picture"><b>取消</b></a>
			</li>
		</ul>
	</div>
<% } %>
<script type="text/javascript" charset="utf-8">
	var active = null,
		lastid, span;
	mui("#describe").on("tap", "span", function() {
		var previousSibling=this;
		change(previousSibling);
	});
	mui("#goods").on("tap", "span", function() {
		var previousSibling=this;
		change(previousSibling);
	});
	mui("#service").on("tap", "span", function() {
		var previousSibling=this;
		change(previousSibling);
	});
	 function change(previousSibling){
	 	var nextSibling=previousSibling.nextElementSibling;
		while (previousSibling!=null){
			previousSibling.classList.remove("mui-icon-star");
			previousSibling.classList.add("mui-icon-star-filled");
			previousSibling=previousSibling.previousElementSibling;
		}
		while (nextSibling!=null){
			nextSibling.classList.remove("mui-icon-star-filled");
			nextSibling.classList.add("mui-icon-star");
			nextSibling=nextSibling.nextElementSibling;
		}
	}
</script>
